<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="java.time.format.DateTimeFormatter" %>
<%@ page import="java.util.List" %>
<%@ page import="com.example.asa.Alert" %>
<%
    List<Alert> alertList = (List<Alert>) request.getAttribute("alertList");
    if (alertList == null || alertList.isEmpty()) {
        alertList = java.util.Collections.emptyList();
    }
%>
<html>
<head>
    <title>预警信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        :root {
            --primary-color: #1E40AF;
            --warning-high: #DC2626;
            --warning-medium: #F59E0B;
            --warning-low: #10B981;
            --text-dark: #1F2937;
            --text-light: #6B7280;
            --bg-light: #F9FAFB;
            --border-color: #E5E7EB;
            --shadow: 0 2px 4px rgba(0,0,0,0.05);
            --radius: 8px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Inter', 'Segoe UI', sans-serif;
            background-color: var(--bg-light);
            color: var(--text-dark);
            line-height: 1.6;
            padding: 2rem;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
        }

        .page-header {
            text-align: center;
            margin-bottom: 2rem;
        }

        .page-title {
            font-size: 2rem;
            font-weight: 600;
            color: var(--primary-color);
        }

        .alert-container {
            background-color: white;
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            overflow: hidden;
        }

        .alert-table {
            width: 100%;
            border-collapse: collapse;
        }

        .alert-table thead {
            background-color: var(--primary-color);
            color: white;
        }

        .alert-table th, .alert-table td {
            padding: 1rem;
            text-align: left;
            border-bottom: 1px solid var(--border-color);
        }

        .alert-table th {
            font-weight: 500;
        }

        .alert-table tbody tr:last-child td {
            border-bottom: none;
        }

        .alert-table tbody tr:hover {
            background-color: rgba(30, 64, 175, 0.03);
            transition: background-color 0.2s;
        }

        .severity-badge {
            padding: 0.3rem 0.7rem;
            border-radius: 4px;
            font-size: 0.9rem;
            font-weight: 500;
            display: inline-block;
            text-transform: capitalize;
        }

        .severity-high {
            background-color: rgba(220, 38, 38, 0.1);
            color: var(--warning-high);
        }

        .severity-medium {
            background-color: rgba(245, 158, 11, 0.1);
            color: var(--warning-medium);
        }

        .severity-low {
            background-color: rgba(16, 185, 129, 0.1);
            color: var(--warning-low);
        }

        .no-data {
            padding: 3rem;
            text-align: center;
            color: var(--text-light);
        }

        .back-btn {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            background-color: var(--primary-color);
            color: white;
            padding: 0.7rem 1.2rem;
            border-radius: var(--radius);
            text-decoration: none;
            margin-top: 1.5rem;
            transition: background-color 0.2s;
        }

        .back-btn:hover {
            background-color: #1D4ED8;
        }

        /* 响应式布局 */
        @media (max-width: 768px) {
            body {
                padding: 1rem;
            }

            .alert-table th, .alert-table td {
                padding: 0.7rem;
                font-size: 0.9rem;
            }

            .severity-badge {
                padding: 0.2rem 0.5rem;
                font-size: 0.8rem;
            }
        }
    </style>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="page-header">
        <h1 class="page-title">预警信息</h1>
    </div>

    <div class="alert-container">
        <table class="alert-table">
            <thead>
            <tr>
                <th>标题</th>
                <th>内容</th>
                <th>等级</th>
                <th>发布时间</th>
                <th>发布人</th>
            </tr>
            </thead>
            <tbody>
            <% if (!alertList.isEmpty()) { %>
            <% for (Alert alert : alertList) { %>
            <tr>
                <td><%= alert.getTitle() %></td>
                <td><%= alert.getContent() %></td>
                <td>
                                    <span class="severity-badge
                                        <%= "高".equals(alert.getSeverity()) ? "severity-high" :
                                             "中".equals(alert.getSeverity()) ? "severity-medium" :
                                             "低".equals(alert.getSeverity()) ? "severity-low" : "" %>">
                                        <%= alert.getSeverity() %>
                                    </span>
                </td>
                <td><%= alert.getPublishTime() != null ? alert.getPublishTime().toLocalDateTime().format(DateTimeFormatter.ofPattern("yyyy-MM-dd HH:mm:ss")) : "" %></td>
                <td><%= alert.getPublisher() %></td>
            </tr>
            <% } %>
            <% } else { %>
            <tr>
                <td colspan="5" class="no-data">
                    <i class="fa fa-bell-slash-o" style="font-size: 2rem; margin-bottom: 0.5rem; display: block;"></i>
                    暂无预警信息
                </td>
            </tr>
            <% } %>
            </tbody>
        </table>
    </div>

    <a href="clviLianPage.jsp" class="back-btn">
        <i class="fa fa-arrow-left"></i> 返回首页
    </a>
</div>
</body>
</html>